<template>
  <div id="columnDiv">
    <h3>栏目管理</h3>
    <el-row>
      <el-col :span="16" id="colLeft">
        <el-button type="primary" @click="addFatherValue=true" style="margin-bottom: 10px">添加父节点</el-button>
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            style="background-color: #f8f8f8;width: 300px"
            v-for="items in columnList" v-bind:key="items.id">
          <el-aside id="colAside">
            <el-submenu :index="String(items.id)" v-if="items.pid==1||items.pid==0">
              <template slot="title">
                <span>{{ items.name }}</span>
              </template>
              <el-menu-item-group style="background-color: #f8f8f8"
                                  v-for="items in items.children" v-bind:key="items.id">
                <el-menu-item :index="String(items.id)" @click="findOne(items)"
                              v-if="items.children.length==0 || items.pid==1||items.pid==0">
                  {{ items.name }}
                </el-menu-item>
                <el-submenu :index="String(items.id)" v-if="items.children.length>0 && items.pid!=1&&items.pid!=0">
                  <template slot="title">
                    <span>{{ items.name }}</span>
                  </template>
                  <el-menu-item-group style="background-color: #f8f8f8"
                                      v-for="items in items.children" v-bind:key="items.id">
                    <el-menu-item :index="String(items.id)" @click="findOne(items)">{{ items.name }}</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu-item-group>
            </el-submenu>
          </el-aside>
        </el-menu>
      </el-col>
      <el-col :span="8" id="colRight">
        <el-button type="primary" plain @click="addSonValue=true">添加子节点</el-button>
        <el-button type="primary" plain @click="updButton">修改</el-button>
        <el-button type="primary" plain @click="del">删除</el-button>
        <el-descriptions :column="1" style="margin-top: 10px">
          <el-descriptions-item label="父节点名称">{{ column.pname }}</el-descriptions-item>
          <el-descriptions-item label="Node Chinese name">{{ column.name }}</el-descriptions-item>
          <el-descriptions-item label="节点英文名称">{{ column.ename }}</el-descriptions-item>
          <el-descriptions-item label="接口路径">{{ column.interfacePath }}</el-descriptions-item>
          <el-descriptions-item label="排序号">{{ column.order }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <el-dialog title="添加父节点" width="50%"
               :visible.sync="addFatherValue"
               :before-close="handleClose">
      <el-form ref="passwordForm" :model="addFatherColumn" label-position="left"
               label-width="120px" :rules="rules">
        <el-form-item label="节点中文名称" prop="name">
          <el-input v-model="addFatherColumn.name"></el-input>
        </el-form-item>
        <el-form-item label="节点英文名称" prop="ename">
          <el-input v-model="addFatherColumn.ename"></el-input>
        </el-form-item>
        <el-form-item label="页面地址" prop="pagePath">
          <el-input v-model="addFatherColumn.pagePath"></el-input>
        </el-form-item>
        <el-form-item label="接口路径" prop="interfacePath">
          <el-input v-model="addFatherColumn.interfacePath"></el-input>
        </el-form-item>
        <el-form-item label="排序号" prop="order">
          <el-input v-model="addFatherColumn.order" placeholder="数字越大排序越前"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="addFatherValue = false">取 消</el-button>
      <el-button type="primary" @click="addFather">确 定</el-button>
    </span>
    </el-dialog>
    <el-dialog title="添加子节点" width="50%"
               :visible.sync="addSonValue"
               :before-close="handleClose">
      <el-form ref="passwordForm" :model="addSonColumn" label-position="left"
               label-width="120px" :rules="rules">
        <el-form-item label="父节点名称">
          {{ column.pname }}
        </el-form-item>
        <el-form-item label="节点中文名称" prop="name">
          <el-input v-model="addSonColumn.name"></el-input>
        </el-form-item>
        <el-form-item label="节点英文名称" prop="ename">
          <el-input v-model="addSonColumn.ename"></el-input>
        </el-form-item>
        <el-form-item label="页面地址" prop="pagePath">
          <el-input v-model="addSonColumn.pagePath"></el-input>
        </el-form-item>
        <el-form-item label="接口路径" prop="interfacePath">
          <el-input v-model="addSonColumn.interfacePath"></el-input>
        </el-form-item>
        <el-form-item label="排序号" prop="order">
          <el-input v-model="addSonColumn.order" placeholder="数字越大排序越前"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="addSonValue = false">取 消</el-button>
      <el-button type="primary" @click="addSon">确 定</el-button>
    </span>
    </el-dialog>
    <el-dialog title="编辑节点" width="50%"
               :visible.sync="updValue"
               :before-close="handleClose">
      <el-form ref="passwordForm" :model="updColumn" label-position="left"
               label-width="120px" :rules="rules">
        <el-form-item label="父节点名称" prop="pid">
          {{ updColumn.pname }}
        </el-form-item>
        <el-form-item label="节点中文名称" prop="name">
          <el-input v-model="updColumn.name"></el-input>
        </el-form-item>
        <el-form-item label="节点英文名称" prop="ename">
          <el-input v-model="updColumn.ename"></el-input>
        </el-form-item>
        <el-form-item label="页面地址" prop="pagePath">
          <el-input v-model="updColumn.pagePath"></el-input>
        </el-form-item>
        <el-form-item label="接口路径" prop="interfacePath">
          <el-input v-model="updColumn.interfacePath"></el-input>
        </el-form-item>
        <el-form-item label="排序号" prop="order">
          <el-input v-model="updColumn.order" placeholder="数字越大排序越前"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="updValue = false">取 消</el-button>
      <el-button type="primary" @click="upd">确 定</el-button>
    </span>
    </el-dialog>
  </div>

</template>

<script>
import {
  getColumnList,
  addColumn,
  updateColumn,
  deleteColumn
} from "@/api/authority/column"

export default {
  data() {
    return {
      columnList: [],
      addFatherValue: false,
      addFatherColumn: {},
      addSonValue: false,
      addSonColumn: {},
      updValue: false,
      updColumn: {},
      rules: {
        password: [
          {required: true, message: '请输入节点中文名称', trigger: 'blur'},
          {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
        ],
        newPassword1: [
          {required: true, message: '请输入节点英文名称', trigger: 'blur'},
          {min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur'}
        ]
      },
      active: 1,
      column: {
        pname: '',
      },
    }
  },
  created() {
    this.getColumn();
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？').then(() => {
        done();
      }).catch(() => {
      })
    },
    findOne(val) {
      this.column = val;
      this.columnList.forEach(item => {
        if (item.id === val.pid) {
          this.column.pname = item.name;
        }
      })
      console.log(this.column);
    },
    addFather() {
      this.addFatherColumn.pid = 1;
      addColumn(this.addFatherColumn).then(res => {
        if (res.code == 200) {
          this.$message('添加成功')
          this.addFatherValue = false;
          this.getColumn();
        } else {
          this.$message('添加失败')
        }
      })
    },
    addSon() {
      this.addSonColumn.pid = this.column.id;
      addColumn(this.addSonColumn).then(res => {
        if (res.code == 200) {
          this.$message('添加成功')
          this.addSonValue = false;
          this.getColumn();
        } else {
          this.$message('添加失败')
        }
      })
    },
    updButton() {
      this.updValue = true;
      this.updColumn = this.column;
    },
    upd() {
      updateColumn(this.updColumn).then(res => {
        if (res.code == 200) {
          this.$message('修改成功')
          this.updValue = false;
          this.getColumn();
        } else {
          this.$message('修改失败')
        }
      })
    },
    del() {
      deleteColumn(this.column.id).then(res => {
        if (res.code == 200) {
          this.$message('删除成功')
          this.getColumn();
        } else {
          this.$message('删除失败')
        }
      })
    },
    getColumn() {
      getColumnList().then(res => {
        this.columnList = res.rows
        console.log(this.columnList)
      })
    }
  }
}
</script>

<style>


#columnDiv {
  background-color: #ffffff;
  padding: 10px;
  height: 120%;
}

#colLeft {
  border-right: 1px solid rgb(128, 128, 128);
  padding: 10px;
}

#colAside {
  background-color: #ffffff;
  height: 100%;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

#colRight {
  padding: 10px;
}
</style>